<template>
    <transition name="move">
    <div v-show="showFlag" class="food" ref="food">
    <div class="food-content">
        <div class="image-header">
            <img :src="food.image" alt="">
            <div class="back" @click="hide">
            <i class="icon-arrow_lift"></i>
            </div>
        </div>
        <div class="content">
            <h1 class="title">{{food.name}}</h1>
            <div class="detail">
                <span class="sell-count">月售{{food.sellCount}}份</span>
                <span class="rating">好评率{{food.rating}}%</span>
            </div>
            <div class="price">
                <span class="new">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
            </div>
            <div class="cartcontrol-warpper">
                <a-cartcontraol :food="food"></a-cartcontraol>
            </div>
            <transition name="fade">
                <div @click="addFirst($event)" class="buy" v-show="!food.count||food.count===0">
                    加入购物车
                </div>
            </transition>
        </div>
        <a-split vshow="food.info"></a-split>
        <div class="info" v-show="food.info">
            <h1 class="title">商品信息</h1>
            <p class="text">{{food.info}}</p>
        </div>
        <a-split vshow="food.info"></a-split>
        <div class="rating">
            <h1 class="title">商品评价</h1>
           <a-ratingselect
                   @select="selectRating"
                   :ratings="food.ratings"
                   :select-type="selectType"
                   :only-content="onlyContent"
                   :desc="desc"></a-ratingselect>
        </div>
    </div>
    </div>
    </transition>
</template>

<script>
import ratingselect from "./ratingselect.vue";
import split from "./split.vue";
import Bscroll from "better-scroll";
import Vue from "vue";
import cartcontraol from "./cartcontrol";
import ASplit from "./split";
const POITVE = 0;
const NEGATIVE = 1;
const All = 2;

export default {
  name: "food",
  props: {
    food: {
      type: Object
    }
  },
  data() {
    return {
      showFlag: false,
      selectType: All,
      onlyContent: true,
      desc: {
        all: "全部",
        positive: "推荐",
        negative: "吐槽"
      }
    };
  },
  methods: {
    show() {
      this.showFlag = true;
      this.selectType = 0;
      this.onlyContent = true;
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new Bscroll(this.$refs.food, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    hide() {
      this.showFlag = false;
    },
    addFirst(event) {
      this.$emit("add", event.target);
      console.log(Vue);
      Vue.set(this.food, "count", 1);
    },
    selectRating(type) {
      console.log(type);
      this.selectType = type;
      // this.$nextTick(() => {
      //     this.scroll.refresh();
      // });
    }
  },
  components: {
    ASplit,
    "a-cartcontraol": cartcontraol,
    "a-split": split,
    "a-ratingselect": ratingselect
  }
};
</script>

<style lang="stylus">
.food
    position fixed
    left 0
    top:0
    bottom 48px
    z-index 30
    width: 100%
    background-color #fff
    &.move-enter-active,&.move-leave-active
        transition all .2s linear
        transform translate3d(0,0,0)
    &.move-enter,&.move-leave-to
       transform translate3d(100% ,0,0)
    .image-header
          position relative
          width 100%
          height:0
          padding-top 100%
          img
           position absolute
           top:0
           left 0
           width: 100%
           height: 100%
          .back
            position absolute
            top:10px
            left 0
            .icon-arrow_lift
               display block
               padding 10px
               font-size 20px
               color #fff

    .content
      position relative
      padding 18px;
      .title
        line-height 14px;
        margin-bottom 8px;
        font-size 14px;
        font-weight: 700
        color rgb(7,17,27)
      .detail
        margin-bottom 18px
        line-height 10px
        height 10px
        font-size 0
        .sell-count,.rating
           font-size 10px
           color rgb(147,153,159)
        .sell-count
           margin-right 12px;
      .price
        font-weight 700
        height 24px
        line-height 24px
        .new,.old
            height 24px
            line-height 24px
            color rgb(147,153,159)
        .new
            font-size 14px
            margin-right 8px
            color rgb(240,50,20)
        .old
            font-size 10px
            font-weight 700
            text-decoration line-through
            color: #93999f;

    .cartcontrol-warpper
      position absolute
      right 12px
      bottom 12px
    .buy
      position absolute
      right 18px
      bottom:18px
      z-index 10
      height 24px
      line-height 24px;
      padding 0 12px
      box-sizing border-box
      font-size 10px;
      border-radius 12px
      color #fff
      opacity 1
      background-color rgb(0,160,220)
      &.fade-enter-active, &.fade-leave-active
        transition all .2s
      &.fade-enter, &.fade-leave-to
        opacity 0
        z-index -1


    .info
      padding 18px
      .title
        line-height 14px
        margin-bottom 6px
        font-size 14px
        color rgb(7,17,27)
      .text
        line-height 24px
        padding 0 8px
        font-size 12px
        color rgb(77,85,93)
    .rating
      padding-top 18px;
      .title
          line-height:14px;
          margin-left 18px;
          font-size 14px;
          color: rgb(7,17,27)

</style>
